<template>
    <el-form :model="userForm" ref="userFormRef" :rules="rules">
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="userName">
            <el-input v-model="userForm.userName" autocomplete="off"/>
        </el-form-item>
        <el-form-item v-if="passwordShow" label="密码" :label-width="formLabelWidth" prop="password">
            <el-input v-model="userForm.password" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
            <el-input v-model="userForm.email" type="text" style="width: 240px" placeholder="请输入邮箱"/>
        </el-form-item>
        <el-form-item label="用户角色" :label-width="formLabelWidth" prop="roleId">
            <el-select v-model="userForm.roleId" placeholder="请选择用户角色">
                <el-option label="请选择" value="0"/>
                <el-option label="超级管理员" value="1"/>
                <el-option label="管理员" value="2"/>
            </el-select>
        </el-form-item>
    </el-form>
    <div class="dialog-footer">
        <el-button @click="$emit('flush')">取消</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
    </div>
</template>

<script setup lang="ts">
    import {ref, reactive, onMounted, defineExpose, defineProps, defineEmits} from 'vue'
    import {ElMessage, ElMessageBox, FormInstance, FormRules} from 'element-plus'
    import {useRouter} from 'vue-router'
    import axios from "../../api";

    const passwordShow = ref(true)

    const formLabelWidth = '140px'

    //const props = defineProps(['row_props'])  //获得父组件绑定属性

    /**
     * 提交添加用户
     */
    interface UserForm {
        userId: number,
        userName: string,
        password: string,
        roleId: string,
        email: string
    }

    const userFormRef = ref<FormInstance>()

    let userDefaultBean = {
        userId: 0,
        userName: '',
        password: '',
        roleId: '0',
        email: ''
    }

    const userForm = ref<UserForm>(userDefaultBean)

    const validateRoleId = (rule: any, value: any, callback: any) => {
        if (value === '0') {
            callback(new Error('请选择用户角色'))
        } else {
            callback()
        }
    }

    const rules = reactive<FormRules<UserForm>>({
        userName: [
            {required: true, message: '用户名不能为空', trigger: 'blur'},
            {pattern: /^[a-zA-Z0-9_-]{4,16}$/, message: '用户名格式错误', trigger: 'blur'},
        ],
        password: [
            {required: true, message: '密码不能为空', trigger: 'blur',},
        ],
        email: [
            {required: true, message: '密码不能为空', trigger: 'change',},
            {pattern: /^[a-zA-Z0-9_-]{4,16}$/, message: '用户名格式错误', trigger: 'blur'},
        ],
        roleId: [
            {required: true, message: '请选择用户角色', trigger: 'change',},
            {validator: validateRoleId, trigger: 'change'}
        ]
    })

    //声明父组件flash监听
    let emit = defineEmits(["flush"])
    const handleSubmit = async (formEl: FormInstance | undefined) => {
        await userFormRef.value.validate(valid => {
            if (valid) {
                //ajax

                emit('flush')
            }
        })
    }

    const initUserForm = (row) => {
        /*
            点编辑进入将row赋值给userForm
            点添加进入row为null，显示默认userBean
        */
        if (row) {
            userForm.value = row
            userForm.value.roleId = row.roleId + ''
            passwordShow.value = false
        } else {
            userForm.value = userDefaultBean
            passwordShow.value = true
        }

    }

    defineExpose({
        initUserForm,
        userFormRef
    })
</script>

<style scoped>

</style>
